<template>
    <div class="container">
        <div class="header">
            <select v-model="selectedTable" @change="fetchData">
                <option value="users">用户信息</option>
                <option value="admins">管理员信息</option>
            </select>
            <input
                v-model="searchKeyword"
                placeholder="搜索用户名或角色"
                @input="handleSearch"
                class="search-input"
            />
            <button @click="deleteSelected" :disabled="!selectedRows.length" class="delete-button">删除</button>
        </div>

        <table class="data-table">
            <thead>
                <tr>
                    <th><input type="checkbox" @change="toggleSelectAll" :checked="isAllSelected" /></th>
                    <th class="username-column">用户名</th>
                    <th class="role-column">角色</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="item in paginatedData" :key="item[selectedTable === 'users' ? 'user_id' : 'admin_id']">
                    <td>
                        <input type="checkbox" :value="item[selectedTable === 'users' ? 'user_id' : 'admin_id']" v-model="selectedRows" @click.stop />
                    </td>
                    <td class="username-column">{{ item.username }}</td>
                    <td class="role-column">{{ item.role }}</td>
                </tr>
            </tbody>
        </table>

        <div class="pagination">
            <button @click="prevPage" :disabled="currentPage === 1" class="pagination-button">上一页</button>
            <span>第 {{ currentPage }} 页 共 {{ totalItems }} 条</span>
            <button @click="nextPage" :disabled="currentPage === totalPages" class="pagination-button">下一页
            </button>
        </div>

        <confirmation-dialog
            v-if="showConfirmationDialog"
            @confirm="confirmDelete"
            @cancel="cancelDelete"
        />
    </div>
</template>

<script>
import ConfirmationDialog from '../components/ConfirmationDialog.vue'; // 确认对话框组件

export default {
    components: {
        ConfirmationDialog,
    },
    data() {
        return {
            selectedTable: 'admins', // 默认选择管理员信息
            data: [], // 存储用户或管理员数据
            selectedRows: [], // 存储选中的行
            currentPage: 1,
            itemsPerPage: 10,
            showConfirmationDialog: false,
            searchKeyword: '', // 搜索关键字
            totalItems: 0, // 添加总条目数
        };
    },
    computed: {
        // 分页数据
        paginatedData() {
            const start = (this.currentPage - 1) * this.itemsPerPage;
            return this.data.slice(start, start + this.itemsPerPage);
        },
        // 总页数
        totalPages() {
            return Math.ceil(this.totalItems / this.itemsPerPage);
        },
        // 是否全选
        isAllSelected() {
            return this.selectedRows.length === this.paginatedData.length;
        },
    },
    methods: {
        // 获取数据
        fetchData() {
            const endpoint = this.selectedTable === 'users' ? 'http://localhost:3000/api/users' : 'http://localhost:3000/api/admins';
            const url = `${endpoint}?page=${this.currentPage}&limit=${this.itemsPerPage}&search=${this.searchKeyword}`;

            fetch(url)
                .then(response => {
                    console.log('Response:', response); // 打印响应
                    if (!response.ok) {
                        throw new Error('网络响应不正常');
                    }
                    return response.json();
                })
                .then(result => {
                    this.data = result.data; // 确保将数据赋值给 this.data
                    this.totalItems = result.total || this.data.length; // 更新总条目数
                    this.selectedRows = []; // 清空选中的行
                })
                .catch(error => {
                    console.error('获取数据失败:', error);
                    alert('获取数据失败，请检查控制台日志！');
                });
        },
        // 处理搜索
        handleSearch() {
            this.currentPage = 1; // 重置为第一页
            this.fetchData(); // 重新加载数据
        },
        // 全选/取消全选
        toggleSelectAll(event) {
            if (event.target.checked) {
                // 根据当前选择的表格更新 selectedRows
                if (this.selectedTable === 'users') {
                    this.selectedRows = this.paginatedData.map(item => item.user_id); // 使用 user_id
                } else {
                    this.selectedRows = this.paginatedData.map(item => item.admin_id); // 使用 admin_id
                }
            } else {
                this.selectedRows = [];
            }
        },
        // 删除选中的行
        deleteSelected() {
            if (this.selectedRows.length > 0) {
                this.showConfirmationDialog = true; // 显示确认对话框
            }
        },
        // 确认删除
        confirmDelete() {
            const endpoint = this.selectedTable === 'users' ? 'http://localhost:3000/api/users' : 'http://localhost:3000/api/admins';
            // 发送批量删除请求
            fetch(endpoint, {
                method: 'DELETE',
                headers: {
                    'Content-Type': 'application/json',
                },
                body: JSON.stringify({
                    ids: this.selectedRows, // 选中的用户或管理员 ID 数组
                }),
            })
            .then(response => {
                console.log('删除响应状态:', response.status, response.statusText); // 打印删除响应状态

                if (!response.ok) {
                    return response.json().then(errorData => {
                        console.error('删除响应内容:', errorData); // 打印删除响应内容
                        throw new Error(`删除失败: ${response.status} ${response.statusText}`);
                    });
                }
                return response.json();
            })
            .then(result => {
                console.log('删除结果:', result); // 打印删除结果
                // 更新前端数据
                this.fetchData(); // 重新获取数据
                this.selectedRows = []; // 清空选中的行
                this.showConfirmationDialog = false; // 关闭对话框
                alert(result.message); // 显示成功消息
            })
            .catch(error => {
                console.error('删除失败:', error);
                alert('删除失败，请重试！');
            });
        },
        // 取消删除
        cancelDelete() {
            this.showConfirmationDialog = false; // 关闭对话框
        },
        // 上一页
        prevPage() {
            if (this.currentPage > 1) {
                this.currentPage--;
                this.fetchData(); // 重新加载数据
            }
        },
        // 下一页
        nextPage() {
            if (this.currentPage < this.totalPages) {
                this.currentPage++;
                this.fetchData(); // 重新加载数据
            }
        },
    },
    mounted() {
        this.fetchData(); // 组件挂载时获取数据
    },
};
</script>

<style scoped>
.container {
    display: flex;
    flex-direction: column; /* 垂直排列 */
    flex-direction: column;
    width: 500px;
    height: 950px;
    margin-bottom: 120px;
    background-color: white; /* 白色背景 */
    border-radius: 10px; /* 圆角 */
    padding: 10px; /* 内边距 */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* 添加阴影 */
}

.header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

/* 选择器样式 */
.header select {
    padding: 8px;
    border: 1px solid #ddd;
    border-radius: 4px; /* 添加圆角 */
    height: 34px; /* 统一高度 */
    margin: 0 10px;
}

/* 搜索框样式 */
.search-input {
    padding: 8px;
    border: 1px solid #ddd;
    border-radius: 4px; /* 添加圆角 */
    height: 34px; /* 统一高度 */
    margin: 0 10px;
    transition: border-color 0.3s; /* 添加悬停效果 */
}

.search-input:hover {
    border-color: #007bff; /* 悬停时边框颜色 */
}

/* 删除按钮样式 */
.header button {
    padding: 8px 12px;
    border: none;
    border-radius: 4px; /* 添加圆角 */
    background-color: #dc3545; /* 红色背景 */
    color: white;
    cursor: pointer;
    transition: background-color 0.3s;
    height: 34px; /* 统一高度 */
    margin: 0 10px;
}

.header button:hover {
    background-color: #a71d2a; /* 悬停时深红色背景 */
}

/* 分页按钮样式 */
.pagination button {
    padding: 8px 12px;
    border: none;
    border-radius: 4px; /* 添加圆角 */
    background-color: #007bff; /* 蓝色背景 */
    color: white;
    cursor: pointer;
    transition: background-color 0.3s;
    height: 34px; /* 统一高度 */
    margin: 0 5px;
}

.pagination button:hover {
    background-color: #0056b3; /* 悬停时深蓝色背景 */
}

.pagination button:disabled {
    background-color: #ccc;
    cursor: not-allowed;
}

/* 分页区域样式 */
.pagination {
    margin-top: 20px;
    display: flex;
    justify-content: center;
    align-items: center; /* 垂直居中对齐 */
}

/* 表格样式 */
.data-table {
    width: 100%; /* 表格宽度撑满 */
    border-collapse: collapse; /* 合并边框 */
}

.data-table th, .data-table td {
    border: 1px solid #ddd; /* 添加边框 */
    padding: 12px; /* 增加内边距 */
    text-align: left; /* 左对齐 */
}

.data-table th {
    background-color: #f2f2f2; /* 表头背景色 */
}

.username-column {
    width: 40%; /* 增加用户名列宽 */
}

.role-column {
    width: 30%; /* 增加角色列宽 */
}

/* 描述文本样式 */
.description-text {
    cursor: pointer;
}
</style>